<template>
	<view class="starts-wapper">
		<view class="starts-icon-box">
			<view class="" v-for="(yellow) in yellowStart">
				<image src="../static/icos/star-yellow.png" mode="widthFix" class="starts-icon"></image>
			</view>
			<view class="" v-for="(gery) in geryStart">
				<image src="../static/icos/star-gray.png" mode="widthFix" class="starts-icon"></image>
			</view>
		</view>
		<view class="start-text-box" v-if="this.isShow===1">
			{{this.startNumber}}
		</view>
	</view>
</template>

<script>
	export default {
		props:['startNumber','isShow'],
		data() {
			return {
				yellowStart:0,
				geryStart:5
			}
		},
		methods: {
		},
		/* 样式加载完成立即运行生命周期 */
		created() {
			var tempScore = 0;
			if (this.startNumber != null && this.startNumber != undefined && this.startNumber != '') {
				tempScore = this.startNumber;
			}
			
			var yelloScore = parseInt(tempScore / 2);
			var grayScore = 5 - yelloScore;
			
			this.yellowStart = yelloScore;
			this.geryStart = grayScore;
		}
	}
</script>

<style>
/* 外层容器设为弹性盒 */
.starts-wapper{
	display: flex;
}
/* 设置为弹性盒垂直水平居中 */
.starts-icon-box{
	display: flex;
	justify-content: center;
	align-items: center;
}
/* icon图片大小设置 */
.starts-icon{
	width: 24rpx;
}
/* 分数字体大小颜色居中设置 */
.start-text-box{
	font-size: 12px;
	color: grey;
	margin-left: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
